<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head th:include="includes/head :: htmlhead(~{::title}, ~{})">
    <meta charset="utf-8">
    <title>表数据&维护</title>
</head>
<body>
<div id="mainLayout" class="easyui-layout" data-options="fit: true">
    <div style="padding:0px;height:calc(100% - 30px)">
        <table id='dg' style="width:100%;height:100%"></table>
    </div>
    <div id="pg" style="height:30px" class="easyui-pagination">
    </div>
</div>

<!-- ddl模块 -->
<div id="ddlDlg" class="easyui-dialog" maximized="true"
     closed="true" closable="true" modal="true">
    <input id="ddlTb" type="text" style="width:100%;height:100%" readonly>
</div>

<!-- 列模式模块 -->
<div id="columnModeDlg" class="easyui-dialog" maximized="true"
     closed="true" closable="true" modal="true">
    <div id="columnModeTable">
    </div>
</div>

<script type="text/javascript">
    let table = '[[${table}]]';
    $(function () {
        let toolbar = [{
            text: 'DDL',
            iconCls: 'icon-diy-table2',
            handler: function () {
                ddl();
            }
        }, {
            text: '列模式',
            iconCls: 'icon-diy-column1',
            handler: function () {
                columnMode();
            }
        }];

        $('#dg').datagrid({
            data: []
            , columns: []
            , autoRowHeight: true
            , rownumbers: true
            , singleSelect: true
            , toolbar: toolbar
        });

        $('#pg').pagination({
            pageList: COMMONPARAM_PAGELIST,
            pageSize: COMMONPARAM_DEFAULTPAGESIZE,
            total: 0,
            pageNumber: 1,
            beforePageText: '第',
            afterPageText: '页    共 {pages} 页',
            displayMsg: '当前显示 {from} - {to}条记录,共{total}条记录'
        });

        $('#ddlTb').textbox({
            multiline: true
        })

        pagingList(1, COMMONPARAM_DEFAULTPAGESIZE);
    });

    function pagingList(pageNumber, pageSize) {
        let submitData = {};
        submitData['table'] = table;
        //TODO:以后这里还得加查询条件等等
        submitData['page'] = pageNumber;
        submitData['limit'] = pageSize;
        postJSON('/table/pagingList', submitData,
            function (data) {
                let resultList = data['resultList'];
                $('#dg').datagrid({
                    data: resultList[0]['result']
                    , columns: [resultList[0]['columns']]
                })
                $('#pg').pagination({
                    pageList: COMMONPARAM_PAGELIST,
                    pageSize: resultList[0]['pageSize'],
                    total: resultList[0]['totalCount'],
                    pageNumber: resultList[0]['pageNo'],
                    beforePageText: '第',
                    afterPageText: '页    共 {pages} 页',
                    displayMsg: '当前显示 {from} - {to}条记录,共{total}条记录',
                    onSelectPage: function (pageNumber, pageSize) {
                        pagingList(pageNumber, pageSize);//选择第几页的时候，就刷新
                    },
                });
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });
    }

    function ddl() {
        //SHOW CREATE TABLE base_inst
        let submitData = {};
        submitData['table'] = table;
        postJSON('/table/ddl', submitData,
            function (data) {
                $('#ddlDlg').dialog('open').dialog('setTitle', 'ddl');
                $('#ddlTb').textbox('setText', data['ddl']);
            }, function (result, resultdesc) {
                $.messager.show({
                    title: '异常',
                    msg: result + '-' + resultdesc,
                    showType: 'show'
                });
            }, function () {
                alert(3)
            }, function () {
                $.messager.progress(COMMONPARAM_PROCESS);
            }, function () {
                $.messager.progress('close');
            });
    }

    function columnMode() {
        let row = $('#dg').datagrid('getSelected');
        if (row) {
            // $('#adddlg').dialog('open').dialog('setTitle', '修改用户');
            // $('#addfm').form('load', row);
            let table = "<table cellpadding='5'>"
            for (let key in row) {
                console.log(key + ":" + row[key]);
                table += "<tr>";
                table += "<td>" + key + ":</td>";
                table += "<td>" + row[key] + "</td>";
                table += "</tr>";
            }
            table += "</table>";
            //columnModeDlg
            $('#columnModeDlg').dialog('open').dialog('setTitle', '列模式');
            $('#columnModeTable').html(table);

        } else {
            $.messager.show({
                title: '提示',
                msg: '请选择一条记录!',
                showType: 'show'
            });
        }
    }
</script>
</body>